import React, {Component} from 'react';
import {Link} from 'react-router-dom'
import {Button, Menu} from 'element-react'

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeName: "1"
        }
    }

    onOpen = () => {
        // this.props.history.push('/LogIn');
    }

    onClose() {

    }

    Logout = (e) => {
        console.log(e)
    };

    render() {
        return (
            <div>
                <header className="App-header">
                    <h1 className="App-title">Welcome to React</h1>
                    <div className="App-user">
                        <span>名字</span>
                        <Button onClick={this.Logout}>登出</Button>
                    </div>
                </header>
                <aside className="App-aside">
                    <Menu defaultActive="2" className="el-menu-vertical-demo" onOpen={this.onOpen.bind(this)}
                          onClose={this.onClose.bind(this)}>
                        <Menu.SubMenu index="1" title={<span><i className="el-icon-message"></i>导航一</span>}>
                            <Menu.ItemGroup title="分组一">
                                <Menu.Item index="1-1">选项1</Menu.Item>
                                <Menu.Item index="1-2">选项2</Menu.Item>
                                <Menu.Item index="1-2"><Link to='/LogIn'>LogInPage</Link></Menu.Item>
                            </Menu.ItemGroup>
                            <Menu.ItemGroup title="分组2">
                                <Menu.Item index="2-1"></Menu.Item>
                            </Menu.ItemGroup>
                        </Menu.SubMenu>
                        <Menu.Item index="2"><i className="el-icon-menu"></i>导航二</Menu.Item>
                        <Menu.Item index="3"><i className="el-icon-setting"></i>导航三</Menu.Item>
                    </Menu>
                </aside>
                <main className="App-main">
                    <div>1</div>
                    <ul>
                        <li><Link to='/'>HomePage</Link></li>
                        <li><Link to='/LogIn'>LogInPage</Link></li>
                    </ul>

                </main>
                <footer className="App-footer">
                    底部
                </footer>
            </div>
        );
    }
}

export default HomePage;
